<template>
    <up-tabs lineWidth="100px" itemStyle="height:50px;" :scrollable="false" :list="tabList" @click="clickTab"
        activeStyle="color:rgb(0,122,255);fontSize:18px" inactiveStyle="color:#888;fontSize:16px"></up-tabs>

    <up-list @scrolltolower="scrolltolower" style="background-color: #eeebec;">
        <up-empty :iconSize="150" mode="order" text="当前暂无运单" v-if="list.length === 0"></up-empty>
        <up-list-item v-for="item in list" :key="item.id">
            <view class="header-huoyuan">
                <view class="huoyuan-all">
                    <view class="all-1">
                        所属项目：{{ item.projectName }}
                    </view>
                    <view class="orderId">
                        <up-copy :content="item.billId">
                            <text>订单号:{{ item.billId }}</text>
                        </up-copy>
                    </view>
                    <view class="orderId">
                        <up-copy :content="item.billNo">
                            <text>配载单号:{{ item.billNo }}</text>
                        </up-copy>
                    </view>
                    <view class="all-box">
                        <view class="all-left">
                            <view class="all-2">
                                装货时间：{{ item.waybillShipmentStartTime }}
                            </view>
                            <view class="all-3">
                                <view class="left-3">
                                    <view class="left-3-1">
                                        <view class="all-3-1">
                                            装
                                        </view>
                                        <view class="all-3-2">
                                            {{
                                                item.shipperaddress ? item.shipperaddress : showAddress(item, 'initialAddress')
                                            }}
                                        </view>
                                    </view>
                                    <view class="left-3-2">
                                        <image src="/static/images/icon/juli.png" mode=""></image>
                                        <view class="left-3-2-2" v-if="item.billMode == 'APPOINT'">
                                            指派模式
                                        </view>
                                        <view class="left-3-2-2" v-if="item.billMode == 'GRAB'">
                                            抢单模式
                                        </view>
                                    </view>
                                    <view class="left-3-3">
                                        <view class="all-3-3-1">
                                            卸
                                        </view>
                                        <view class="all-3-3-2">
                                            {{
                                                item.consigneeaddress ? item.consigneeaddress : showAddress(item, 'endAddress')
                                            }}
                                        </view>
                                    </view>
                                </view>
                            </view>
                            <view class="all-4">
                                <view class="all-4-1">
                                    {{ item.goodsCountShow }}
                                </view>
                                <view class="all-2">
                                    结束时间：{{ item.waybillShipmentEndTime }}
                                </view>
                            </view>
                        </view>
                        <view class="all-right" @click="toComment(item)"
                            v-if="item.status === 'AUDIT_SUCCESS' && role === 'driver'">
                            <view class="right-text">
                                评价
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </up-list-item>
        <LoadMore :status="status" v-if="list.length !== 0"></LoadMore>
    </up-list>

    <up-toast ref="uToastRef"></up-toast>
</template>

<script lang="ts" setup>
import {
    ref, reactive,
    onMounted
} from "vue"
import {
    useUserStore
} from '@/store/modules/user'
import {
    storeToRefs
} from "pinia"
import LoadMore from "@/components/LoadMore.vue"
import {
    getDriverTask
} from "@/api/driver"
import {
    getCaptainTask
} from "@/api/captain"



/* hooks */
const {
    role
} = storeToRefs(useUserStore())


/* 数据 */
const uToastRef = ref<any>(null)
// 运单列表
const list = reactive<any[]>([])
// 是否还有下一页
const hasNextPage = ref(false)
const status = ref<"loadmore" | "nomore" | "loading" | undefined>('loadmore')
// 获取列表参数
const getListParams = reactive({
    currPage: 1,
    limit: 10,
    status: 'UPLOAD_RECEIPT'
})
// tab列表
const tabList = reactive([{
    name: '已回单',
    status: 'UPLOAD_RECEIPT',
},
{
    name: '已确认',
    status: 'CONFIRM_RECEIPT'
},
{
    name: '待审核',
    status: 'WAIT_AUDIT'
},
{
    name: '已审核',
    status: 'AUDIT_SUCCESS'
}])




/* 方法 */
// 没有详细地址时显示省市区
const showAddress = (item: any, str: string) => {
    let address = JSON.parse(item[str])
    return address.provinceText + address.cityText + address.countyText + (address.text ? address.text : '')
}
// 跳转评价页面
const toComment = (item: any) => {
    uni.navigateTo({
        url: '/package_mine/pages/waybill/comment?billId=' + item.billId
    })
}
// 点击tab
const clickTab = async (item: typeof tabList[0]) => {
    getListParams.currPage = 1
    getListParams.status = item.status
    list.length = 0
    await getList(getListParams)
}
// 触底
const scrolltolower = async () => {
    if (hasNextPage.value) {
        status.value = "loading"
        let params = {
            ...getListParams,
            currPage: getListParams.currPage + 1
        }
        await getList(params)
    } else {
        status.value = "nomore"
    }
}
// 获取列表
const getList = async (params: typeof getListParams) => {
    uToastRef.value.show({
        message: '加载中...',
        type: 'loading',
        duration: -1
    })
    let res = null
    if (role.value === 'captain') {
        res = await getCaptainTask(params)
    } else {
        res = await getDriverTask(params)
    }
    uToastRef.value.hide()
    if (res.success) {
        Object.assign(getListParams, params)
        hasNextPage.value = res.data.hasNextPage
        if (!res.data.hasNextPage) {
            status.value = "nomore"
        } else {
            status.value = "loadmore"
        }
        list.push(...res.data.list)
    }
}
// 初始化封装
const init = async () => {
    await getList(getListParams)
}



/* 钩子 */
onMounted(async () => {
    await init()
})



</script>

<style lang="scss" scoped>
.header-huoyuan {

    background-color: aliceblue;

    .huoyuan-all {
        margin: 0 0 10px 18px;
        padding: 15px 0 5px 0;

        .all-1 {
            font-size: 16px;
            font-weight: 400;
            margin: 0 0 7px 0;
        }

        .all-box {
            display: flex;
            justify-content: space-between;
            margin-bottom: 25px;

            .all-left {
                .all-2 {
                    color: #999;
                }

                .all-3 {
                    display: flex;
                    margin-top: 12px;

                    .left-3 {
                        margin-right: 10px;

                        .left-3-1 {
                            display: flex;

                            .all-3-1 {
                                background-color: green;
                                color: white;
                                border-radius: 50%;
                                padding: 4px 7px;
                                font-size: 15px;
                                margin-right: 18rpx;
                                height: 30px;
                            }

                            .all-3-2 {
                                font-size: 15px;
                                align-content: center;
                            }
                        }

                        .left-3-2 {
                            display: flex;
                            margin: 20px 0;

                            image {
                                width: 20px;
                                height: 20px;
                                margin-right: 20px;
                            }

                            .left-3-2-2 {
                                align-content: center;
                            }
                        }

                        .left-3-3 {
                            display: flex;

                            .all-3-3-1 {
                                background-color: red;
                                color: white;
                                border-radius: 50%;
                                padding: 4px 7px;
                                font-size: 15px;
                                margin-right: 18rpx;
                                height: 30px;
                            }

                            .all-3-3-2 {
                                font-size: 15px;
                                align-content: center;
                            }
                        }
                    }

                    .right-3 {
                        padding: 5px;

                        .right-3-1 {
                            color: dodgerblue;
                            font-size: 15px;
                            margin-bottom: 4px;
                        }

                        .right-3-2 {
                            font-size: 10px;
                            color: #999;
                            margin-bottom: 4px;
                        }

                        .right-3-3 {
                            display: flex;
                            justify-content: space-between;
                            align-items: flex-end;

                            .right-3-3-0 {
                                font-size: 9px;
                                color: #999;
                            }

                            .right-3-3-1 {
                                color: red;
                                font-size: 18px;
                                font-weight: 500;
                                margin: 0 5px;
                            }

                            .right-3-3-2 {
                                font-size: 9px;
                                color: #999;
                            }
                        }
                    }
                }

                .all-4 {
                    display: flex;
                    // justify-content: space-between;
                    margin-top: 20px;
                    align-items: center;

                    .all-4-1 {
                        color: #999;
                        font-size: 12px;
                        margin-right: 13px;
                    }

                    .all-4-2 {
                        display: flex;
                        color: red;

                        .all-4-2-1 {
                            align-content: center;

                            image {
                                width: 15px;
                                height: 15px;
                                margin-right: 5px;
                                line-height: 5px;
                            }
                        }

                        .all-4-2-2 {
                            align-content: center;
                        }

                    }
                }
            }

            .all-right {
                background-color: dodgerblue;
                display: flex;
                justify-content: center;
                align-items: center;
                width: 50px;

                .right-text {
                    color: white;
                    font-size: 17px;
                    text-align: center;
                }
            }
        }

        .orderId {
            color: #999;
            font-size: 16px;
            margin-bottom: 5px;
        }
    }
}
</style>
